<template>
	<div class="chart-area">
		<canvas id="chart" width="375" height="400"></canvas>
	</div>
</template>

<script>
	import F2 from '@antv/f2';
	export default {
		name: 'charts',
		props: {},
		data() {
			return {};
		},
		created() {

		},
		mounted() {
			this.showDatas();
		},
		methods: {
			showDatas() {
				this.$axios
					.get('https://sss.allarenice.com/backend/Example', {
						header: {
							'Access-Control-Allow-Origin': '*'
						}
					})
					.then(function(response) {
						var chart = new F2.Chart({
							id: 'chart',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						chart.source(response.data);
						chart.interval().position('country*country_inquirys').color('country');
						chart.render();
					})
			}
		}
	}
</script>

<style lang="scss">
	.chart-area {
		text-align: center;
		margin-top: 10px;
	}
</style>
